<template>
  <view>
    <SearchInput></SearchInput>
    <u-tabs
      active-color="#ea4350"
      bar-width="150"
      :list="list"
      :is-scroll="false"
      :current="current"
      @change="change"
    >
    </u-tabs>

    <!-- 综合 -->
    <view class="good_list" v-if="current === 0">
      <navigator class="good_content"
       v-for="item in goods" 
       :key="item.goods_id"
       :url="`/pages/goodDetail/goodDetail?goods_id=${item.goods_id}`"
       >
        <u-image
          class="u-p-10 goods_image"
          :src="item.goods_small_logo || src"
          width="191"
          height="191"
        ></u-image>
        <view class="good_info">
          <view class="goods_name">
            {{ item.goods_name }}
          </view>
          <view class="goods_price">￥{{ item.goods_price }}</view>
        </view>
      </navigator>
    </view>
    <!-- 销量 -->
    <view class="good_list" v-if="current === 1"> 销量 销量 销量 </view>

    <!-- 价格  -->
    <view class="good_list" v-if="current === 2"> 价格 价格 价格 </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      list: [
        {
          name: "综合",
        },
        {
          name: "销量",
        },
        {
          name: "价格",
        },
      ],
      goods: [],
      current: 0,
      total: 0,
      src:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F9fo3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2Fpic%2Fitem%2Fc995d143ad4bd113b929a37b58afa40f4afb0596.jpg&refer=http%3A%2F%2Fgss0.baidu.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg?sec=1648385454&t=59105f459bebfa1d7e639f4ffacb3c4c'
    };
  },
  methods: {
    change(index) {
      this.current = index;
    },
    async getGoods() {
      const res = await this.$u.http.get("/goods/search", this.params);
      this.goods = [...this.goods, ...res.goods];
      this.total = res.total;
    },
  },
  onLoad(option) {
    const { cid } = option;
    this.params = {
      query: "",
      cid: cid,
      pagenum: 1,
      pagesize: 20,
    };
    this.getGoods();
  },
  // 滚动条触底事件
  onReachBottom() {
    if (this.goods.length >= this.total) {
      uni.showToast({
        title: "已经到底了",
        icon: "none",
      });
    } else {
      this.params.pagenum++;
      this.getGoods();
    }
  },
  // 下拉刷新事件
  async onPullDownRefresh() {
    this.goods = [];
    this.params.pagenum = 1;
    await this.getGoods();
    uni.stopPullDownRefresh();
  },
};
</script>

<style lang="scss">
.good_content {
  display: flex;
  margin-bottom: 10rpx;

  .good_info {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    border-bottom: 1px solid #ddd;
    padding: 5rpx 10rpx;
    .goods_price {
      color: $theme-color;
    }
  }
}
</style>